<template>
  <div class="wrapper">
    <image
      v-if="!list.banner"
      class="top-img"
      :src="'https://mini.jiaw.com/img/2045220211206.jpg'"
    ></image>
    <image
      mode="widthFix"
      v-if="list.banner"
      class="top-img"
      :src="list.banner"
    ></image>
    <div class="content">
      <div class="shop-describe">
        <div class="logo">
          <image class="logo-img" :src="list.logo"></image>
        </div>
        <div class="detail">
          <div class="title">{{ list.brandsName }}</div>
          <span class="address">商家地址: {{ list.positionCode }}</span>
          <div class="time">
            营业时间: {{ list.startTime }}-{{ list.endTime }}
          </div>
        </div>
        <div class="right">
          <u-icon
            name="star"
            size="50"
            @click="collection"
            v-if="showStart"
          ></u-icon>
          <u-icon
            name="star-fill"
            size="50"
            @click="collection"
            v-if="!showStart"
          ></u-icon>
          <u-icon name="phone" size="50" @click="phone"></u-icon>
        </div>
      </div>

      <u-read-more
        :shadow-style="shadowStyle"
        toggle
        color="#FCAC00"
        show-height="180"
        ref="uReadMore"
      >
        <rich-text :nodes="list.description"></rich-text>
      </u-read-more>
      <div class="activity" v-if="jointCoupon.disType">
        <div class="title">活动</div>
        <div class="content">
          <div class="content-item">
            <div class="left" v-if="jointCoupon.disType === 1">
              <span style="font-size:40rpx">
                {{ jointCoupon.disValue / 10 }}
              </span>
              折
              <!-- <p>任意消费</p> -->
            </div>
            <div class="left" v-if="jointCoupon.disType === 2">
              <p>¥{{ jointCoupon.disType }}</p>
              <p>满{{ jointCoupon.disValue }}可用</p>
            </div>
            <div class="middle">
              <div class="activity-info">
                {{ list.brandsName }}
                【{{ list.positionCode }}】
                {{ jointCoupon.name }}
              </div>
              <div class="activity-time">
                有效期: {{ jointCoupon.startTime }} -{{ jointCoupon.endTime }}
              </div>
            </div>
            <button class="receive-activity" @click="collectCoupons">
              立即领取
            </button>
          </div>
        </div>
      </div>

      <div class="works-reference">
        <div class="tips">作品参考</div>
        <div class="more-images">
          <div v-for="items in list.productlist" :key="items.id">
            <image
              mode="aspectFit"
              class="works-img"
              :src="items.imageAddress"
            ></image>
          </div>
        </div>
      </div>
      <button class="btn" @click="toOrder">买 &nbsp; 单</button>
    </div>
  </div>
</template>

<script>
import {
  getShopDetail,
  collectionStore,
  queryCollectionStore,
  getUserInfo,
  getCouponByStore
} from '@/api'

import { mapState } from 'vuex'
export default {
  onLoad(e) {
    this.id = e.id
  },
  data() {
    return {
      list: [],
      id: '',
      src: '',
      userId: '',
      showStart: true,
      phoneNumber: '4008013280',
      shadowStyle: {
        backgroundImage: 'none',
        paddingTop: '20rpx',
        marginTop: '0rpx'
      },
      jointCoupon: {}
    }
  },

  computed: {
    ...mapState(['openId'])
  },
  created() {
    const { id } = this.userInfo
    this.userId = id
    if (id) {
      this.queryCollection()
    }
  },
  mounted() {
    this.getShopList()
  },
  onShareAppMessage() {
    return {
      path: '/pages/package/shop/component/shop-detail?id=' + this.id
    }
  },
  methods: {
    collectCoupons() {
      getCouponByStore(this.userId, this.id).then(res => {
        uni.showToast({
          title: res.resMsg + '!',
          icon: 'none'
        })
      })
    },
    queryCollection() {
      queryCollectionStore(this.userId).then(res => {
        res.data.stores.some(e => {
          if (e.id === this.id) {
            this.showStart = false
          }
        })
      })
    },
    collection() {
      collectionStore(this.userId, this.id).then(() => {
        this.showStart = !this.showStart
      })
    },
    phone() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber
      })
    },
    toOrder() {
      uni.navigateTo({
        url: '/pages/package/shop/component/order?id=' + this.id
      })
    },
    getShopList() {
      getShopDetail(this.id).then(res => {
        this.jointCoupon = res.data.jointCoupon
        this.phoneNumber = res.data.phone || '4008013280'
        this.list = res.data
        uni.setNavigationBarTitle({
          title: this.list.brandsName
        })
        this.$nextTick(() => {
          this.$refs.uReadMore.init()
        })
      })
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  .top-img {
    // height: 480rpx;
    width: 100%;
  }
  .content {
    padding: 0 20rpx 50rpx;

    .shop-describe {
      height: 200rpx;
      overflow: hidden;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 20rpx;
      .logo {
        width: 180rpx;
        height: 180rpx;
        display: flex;
        align-items: center;

        .logo-img {
          width: 130rpx;
          height: 130rpx;
          border-radius: 50%;
          border: 1px solid rgb(192, 188, 188);
        }
      }
      .detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 0 15rpx;
        .title {
          font-size: 36rpx;
          font-weight: 600;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 430rpx;
        }
        .address {
          color: rgb(129, 127, 127);
        }
        .time {
          font-size: 24rpx;
          color: rgb(129, 127, 127);
        }
      }
      .right {
        width: 70rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        color: #d81e06;
      }
    }
    rich-text {
      color: #4b6679;
      font-size: 32rpx;
    }
    .activity {
      .title {
        font-size: 36rpx;
      }
      .content {
        display: flex;
        flex-wrap: wrap;
        &::after {
          content: '';
          width: 50%;
        }
        .content-item {
          flex: 1;
          display: flex;
          align-items: center;
          border: 1px solid #f0b3aa;
          margin: 30rpx 0;
          padding: 10rpx;
          border-radius: 20rpx;
          .left {
            color: #e65a4b;
            width: 120rpx;
          }
          .middle {
            flex: 1;
            padding: 0 30rpx;
            .activity-time {
              color: rgb(187, 185, 185);
              font-size: 22rpx;
            }
          }
          .receive-activity {
            line-height: 45rpx;
            width: 120rpx;
            background: #22ac38;
          }
        }
      }
    }
    .works-reference {
      margin-top: 40rpx;
      .tips {
        color: #4e5865;
      }
      .more-images {
        display: flex;
        overflow-x: scroll;
        margin-top: 20rpx;
        -webkit-overflow-scrolling: touch;
        .works-img {
          margin: 0 10rpx;
          flex: 0 0 100rpx;
          // height: 128px;
          // width: 360rpx;
        }
      }
    }
    .btn {
      border-radius: 100rpx;
      background: #df0027;
      font-size: 30rpx;
      position: fixed;
      bottom: 40rpx;
      width: 60%;
      height: 80rpx;
      line-height: 80rpx;
      // padding: 6rpx 0;
      margin-left: calc(20% - 20rpx);
    }
  }
}
</style>
